<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="form">
					<wd-form ref="formRef" :model="formData" :rules="formRules">
						<wd-input use-suffix-slot v-model="formData.title" clearable prop="title"
							custom-class="wd-input-custom-class-fd-col  bg-transparent square" label="标题："
							label-width="100px" placeholder="请输入">
						</wd-input>

						<wd-input use-suffix-slot v-model="formData.wenzi_number" clearable prop="wenzi_number"
							custom-class="wd-input-custom-class-fd-col  bg-transparent square" label="发文字号："
							label-width="100px" placeholder="请输入">
						</wd-input>

						<wd-picker custom-class="wd-picker-custom-class-fd-col square bg-transparent"
							@confirm="pickerConfirm" ref="wdPicker" prop="cate_id" :column-change="columnChange"
							v-model="formData.cate_id" label-width="100px" :columns="caseTypeList" value-key="id"
							label-key="title" label="案件类型" placeholder="请选择案件类型">
							<template v-slot:default></template>
						</wd-picker>
						<view class="form-item ">
							<wd-cell title="颁布日期区间段：" vertical>
								<wd-datetime-picker prop="pub_date" type="date" v-model="formData.pub_date" />
							</wd-cell>
						</view>

						<view class="form-item">
							<wd-cell title="施行日期区间段：" vertical>
								<wd-datetime-picker prop="imp_date" type="date" v-model="formData.imp_date" />
							</wd-cell>
						</view>

					</wd-form>
				</view>
				<view class="footer" id="footer">
					<view class="btns">
						<wd-button type="success" @click="submit"
							custom-class="wd-button-custom-class-my-success  wd-button-custom-class-w100">提交</wd-button>
					</view>
				</view>
			</view>
		</wd-config-provider>
	</app-page>


</template>

<script lang="ts">
	import { defineComponent, ref, onMounted, reactive, computed, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import useRouter from '@/hooks/useRouter.ts';

	import { getCategoryFirstList, getCategoryTwoList } from "@/api/index.ts"

	export default defineComponent({
		name: '',
		components: {
		},
		setup(props, ctx) {
			const router = useRouter();

			// 日间light、夜间dark主题
			const theme = ref('light');
			// 表单 Ref
			const formRef = ref();
			const formFields = ref([]);
			const caseTypeList : any = ref([]);
			// 案件列表
			const caseList : any = ref([]);
			const minDate = new Date(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate() + 1));
			// 查询类型列表
			const formRules = {

			};
			const formData = reactive({
				// 案件名称
				title: "",
				wenzi_number: "",
				cate_id: "",
				pub_date: [],
				imp_date: [],
				firstCategory: null,
				twoCategory: null,
			});

			let instance = null;

			const initCategory = (res : any, func ?: Function) => {
				getCategoryTwoList({
					id: res[0].id
				}).then((res) => {
					if (func) {
						func(res);
					} else {
						formData.twoCategory = res[0].id;
						formData.cate_id = [formData.firstCategory, formData.twoCategory];
						caseTypeList.value[1] = res;
					}
				});
			};

			const pickerConfirm = (e : any) => {
				if (e.length > 1) {
					formData.cate_id = e;
				} else {
					// orderInfo.value.category_id = orderInfo.value.twoCategory;
					formData.cate_id = [formData.firstCategory, formData.twoCategory];
				}
			};
			const columnChange = (e) => {
				const valuse = e.getValues();
				if (valuse[0] !== formData.firstCategory) {
					initCategory(
						[
							{
								id: valuse[0]
							}
						],
						(list : any) => {
							if (list.length > 0) {
								e.setColumnData(1, list, 0);
								// orderInfo.value.twoCategory = list.id;
								// orderInfo.value.category_id = list.id;
							} else {
								e.setColumnData(1, [e.getSelects()[0]], 0);
								formData.twoCategory = e.getSelects()[0].id;
								// orderInfo.value.category_id = list.id;
							}
						}
					);
				}
				formData.firstCategory = valuse[0]; // 获取一级分类的值，并将其赋值给orderInfo.firstCategory。
				formData.twoCategory = valuse[1]; // 获取二级分类的值，并将其赋值给orderInfo.twoCategory。
			};
			const submit = () => {
				formRef.value.validate().then(({ err, valid }) => { // 校验表单数据是否符合规则，符合则执行后续操作，否则不执行后续操作。
					if (!valid) {
						return false;
					}
					if (instance) {
						const eventChannel = instance.proxy.getOpenerEventChannel();
						eventChannel.emit('advancedSearch', formData);
					}

				}).catch((errors) => { // 校验不通过时，执行此操作。errors为校验不通过的字段信息。
				});

			}
			onLoad((param) => {
				instance = getCurrentInstance();
				// 获取案件分类
				// 获取案件分类
				getCategoryFirstList().then((res : any) => {
					caseTypeList.value[0] = res;
					formData.firstCategory = res[0].id;
					initCategory(res);
				});

			})
			onMounted(async () => {
			})
			return {
				theme,
				caseList,
				formRules,
				formData,
				formFields,
				formRef,
				submit,
				minDate,
				caseTypeList,
				pickerConfirm,
				columnChange
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #F2F2F2;
	}

	.container {
		padding: 24rpx;



		.form {
			padding-bottom: 180rpx;

			.checkbox {
				padding: 18rpx;
			}


			.form-item {
				padding: 18rpx !important;
				border-radius: 14rpx;
				overflow: hidden;

				:deep(.wd-textarea) {
					padding: 24rpx;
					border-radius: 14rpx;
				}

				:deep(.wd-input) {
					padding: 0 24rpx;
					border-radius: 14rpx;

					.wd-input__inner {
						height: 44px;
						line-height: 44px;
					}
				}

				:deep(.wd-cell) {
					background-color: transparent;
					padding-left: 0;

					.wd-cell__wrapper {
						padding-right: 0;
						padding: 0;
					}

					.wd-cell__right {
						margin-top: 20rpx;
						border-radius: 14rpx;
						overflow: hidden;
					}

					.wd-cell__wrapper.is-vertical .wd-cell__value {
						max-width: 100%;
					}

					.wd-cell__body {
						// background-color: #FFF;
						border-radius: 14rpx;
					}
				}

			}
		}

		.footer {
			position: fixed;
			bottom: 40rpx;
			margin: 0 24rpx;
			padding: 24rpx;
			width: calc(100% - 24rpx - 24rpx - 24rpx - 24rpx);
			left: 0rpx;

			min-height: 100rpx;
			border-radius: 21rpx 21rpx 0 0;

			.btn {
				padding: 30rpx 29rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
</style>